<template>
	<view class="bankcardAdd">
		<view class="bankcardAdd-main">
			<view class="bankcardAdd-main-head">
				<image class="bankcardAdd-main-head-img" src="../../../static/manufacturers/laba.png" mode=""></image>
				<text class="bankcardAdd-main-head-txt">请绑定持卡人本人的银行卡</text>
			</view>
			<view class="bankcardAdd-main-li borderBtm">
				<text class="bankcardAdd-main-li-txt">持卡人</text>
				<input v-model="cardName" class="bankcardAdd-main-li-input" placeholder-class="inputplace" placeholder="请输入持卡人姓名" type="text" value="" />
			</view>
			<view class="bankcardAdd-main-li borderBtm">
				<text class="bankcardAdd-main-li-txt">银行</text>
				<!-- <input class="bankcardAdd-main-li-input" disabledplaceholder-class="inputplace" placeholder="请选择银行" type="text" value="" /> -->
				<picker class="bankcardAdd-main-li-input" @change="bindPickerChange" :value="index" range-key="bankName" :range="array">
					<view class="bankcardAdd-main-li-input" v-if="array[index].bankName">{{array[index].bankName}}</view>
					<view class="bankcardAdd-main-li-input inputplace" v-else>请选择银行</view>
					
				</picker>
				<image class="bankcardAdd-main-li-right" src="https://www.zzzsyh.com/applets/agent/agent/right-two.png" mode=""></image>
				
			</view>
			<view class="bankcardAdd-main-li">
				<text class="bankcardAdd-main-li-txt">卡号</text>
				<input v-model="cardNo" class="bankcardAdd-main-li-input" placeholder-class="inputplace" placeholder="请输入银行卡号" type="text" value="" />
			</view>
		</view>
		<view class="font_blod">
			<view class="bankcardAdd-btn bankcardAdd-btn-ok" @click="saveFactoryBankCards" v-if="allok">
				保存
			</view>
			<view class="bankcardAdd-btn" v-else>
				保存
			</view>
		</view>
		
	</view>
</template>

<script>
	import allapi from '../api/index.js'
	export default {
		data() {
			return {
				factoryId: uni.getStorageSync('id_factory'),
				array: [],
				index: '',
				cardName: '',
				cardNo: '',
			}
		},
		computed: {
			// 按钮是否能点击
			allok () {
				let cardName = this.cardName
				let cardNo = this.cardNo
				let bandTypeId = this.bandTypeId
				if (cardName && cardNo && bandTypeId) {
					return true
				}else {
					return false
				}
			},
			// 银行id
			bandTypeId () {
				let list = this.array
				let num = this.index
				// console.log(list[num].id);
				if (list[num]) {
					return list[num].id
				}
			}
		},
		mounted() {
			this.getFactoryBankTypeList()
		},
		methods: {
			// 更改银行
			bindPickerChange (e) {
				let num = e.target.value
				this.index = num
			},
			// 添加银行账户
			saveFactoryBankCards () {
				uni.request({
					url: allapi.saveFactoryBankCards,
					data: {
						factoryId: this.factoryId,
						cardName: this.cardName,
						cardNo: this.cardNo,
						bandTypeId: this.bandTypeId
					},
					success: (res) => {
						console.log(res);
						uni.navigateBack()
					}
				})
			},
			//获取列表
			getFactoryBankTypeList () {
				uni.request({
					url: allapi.getFactoryBankTypeList,
					success: (res) => {
						console.log(res);
						this.array = res.data.data
					}
				})
			},
		}
	}
</script>

<style scoped lang="less">
	.bankcardAdd {
		width: 100%;
		height: 100%;
		background: #FFFFFF;
		position: absolute;
		left: 0;
		top: 0;
		display: flex;
		flex-direction: column;
	}
	.bankcardAdd-main {
		flex: 1;
	}
	.bankcardAdd-btn {
		margin: 40rpx;
		height: 92rpx;
		line-height: 92rpx;
		background: #5DD4D6;
		border-radius: 46rpx;
		opacity: 0.5;
		text-align: center;
		font-size: 36rpx;
		color: #FFFFFF;
	}
	.bankcardAdd-btn-ok {
		opacity: 1;
	}
	.bankcardAdd-main-head {
		height: 88rpx;
		background: #F9EEF2;
		display: flex;
		align-items: center;
	}
	.bankcardAdd-main-head-img {
		width: 40rpx;
		height: 40rpx;
		margin-left: 38rpx;
		margin-right: 20rpx;
	}
	.bankcardAdd-main-head-txt {
		font-size: 24rpx;
		font-weight: 400;
		color: #A43561;
	}
	.bankcardAdd-main-li {
		height: 96rpx;
		margin: 0 32rpx;
		display: flex;
		align-items: center;
	}
	.borderBtm {
		border-bottom: 1rpx solid #EEEEEE;
	}
	.bankcardAdd-main-li-txt {
		width: 116rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #666666;
	}
	.bankcardAdd-main-li-input {
		flex: 1;
		font-size: 28rpx;
	}
	.bankcardAdd-main-li-right {
		width: 32rpx;
		height: 32rpx;
	}
</style>
